<template>
  <!-- 所有组件属性 -->
  <div class="widgetAttrList">
    <!-- 属性标题 -->
    <div class="widTitle">
      <h3>{{ type && attrList[type]['title'] }}</h3>
    </div>
    <!-- 基础属性 -->
    <div class="baseAttr">
      <div class="itemBox">
        <div class="label">位置：</div>
        <div class="item">
          <div class="infoCon">
            <div class="con" style="margin-right:20px;">
              <span>x：</span>
              <el-input v-model.number="dataAttr.style.x"></el-input>
            </div>
            <div class="con">
              <span>y：</span>
              <el-input v-model.number="dataAttr.style.y"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="itemBox">
        <div class="label">宽高：</div>
        <div class="item">
          <div class="infoCon">
            <div class="con" style="margin-right:20px;">
              <span>w：</span>
              <el-input v-model.number="dataAttr.style.w"></el-input>
            </div>
            <div class="con">
              <span>h：</span>
              <el-input v-model.number="dataAttr.style.h"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="itemBox">
        <div class="label">标题：</div>
        <div class="item">
          <div class="infoCon">
            <el-input v-model="dataAttr.value.title" clearable></el-input>
          </div>
        </div>
      </div>
      <div class="itemBox">
        <div class="label">背景：</div>
        <div class="item">
          <div class="infoCon">
            <Upload v-if="dataAttr.value.bgImg == ''" :params="params" @fileList="getImgList"></Upload>
            <Upload v-else :params="params1" @fileList="getImgList"></Upload>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据配置 -->
    <div v-if="type == 'news' || type == 'list' || type == 'count'" class="title">数据配置：</div>
    <!-- 特有属性 -->
    <component :is="type && attrList[type]['com']" :attrData="attrData"></component>
  </div>
</template>

<script>
//图片上传
import Upload from '@/commont/plugins/uploadImg.vue';
// 小组件属性
import NewsBoxAttr from '@/components/bigData/modelAttr/newsBox.vue';
import ListBoxAttr from '@/components/bigData/modelAttr/listBox.vue';
import CountChartAttr from '@/components/bigData/modelAttr/countChart.vue';
// 静态配置
import { widgetConfigAttr } from '@/commont/constants/dataConfig';
export default {
  components: { Upload, NewsBoxAttr, ListBoxAttr, CountChartAttr },
  props: ['attrData'],
  data() {
    return {
      dataAttr: this.attrData,
      type: this.attrData.type,//组件类型
      attrList: widgetConfigAttr,
      params: {
        type: 'btn',
        btnName: '上传图片',
        url: 'https://jsonplaceholder.typicode.com/posts/',
      },
      params1: {
        type: 'btn',
        url: 'https://jsonplaceholder.typicode.com/posts/',
        btnName: '修改图片',
      },
    }
  },
  watch: {},
  mounted() { },
  methods: {
    getImgList(data) {
      this.dataAttr.value.bgImg = data.fileByteUrl;
    },
  }
}
</script>

<style lang="less" scoped>
.widgetAttrList {
  margin-top: 15px;

  // 标题
  .widTitle {
    display: flex;
    align-items: center;
    padding: 0 15px;

    h3 {
      font-size: 20px;
      color: #333;
      font-weight: bold;
    }
  }

  // 基础属性
  .baseAttr {
    width: 100%;
    height: 100%;
    margin: 10px 0px;

    .itemBox {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px dashed #dbdbdb;

      .label {
        width: 50px;
      }

      .item {
        width: calc(100% - 50px);
      }

      .infoCon {
        width: 100%;
        display: flex;
        align-items: center;

        .con {
          width: 50%;
          display: flex;
          align-items: center;

          span {
            width: 25px;
          }
        }
      }
    }
  }

  .title {
    padding: 10px;
    padding-bottom: 0;
    margin-top: 10px;
    font-weight: bold;
  }
}
</style>